<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>3D立方体旋转相册</title>
    <link rel="stylesheet" href="../css/48.css">
</head>
<style>
    * {
        /* 初始化 */
        margin: 0;
        padding: 0;
    }

    body {
        /* 100%窗口高度 */
        height: 100vh;
        /* 弹性布局 水平垂直居中 */
        display: flex;
        justify-content: center;
        align-items: center;
        background: radial-gradient(circle at center, #333, #000);
    }

    /* 最外层的样式 */
    .out-side {
        width: 1000px;
        height: 1000px;
        /* 弹性布局 居中 */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 盒子 */
    .box {
        /* 绝对定位 */
        position: absolute;
        width: 400px;
        height: 400px;
        /* 开启3D效果 */
        transform-style: preserve-3d;
        /* 执行动画：动画名 时长 线性的 无限次播放 */
        animation: rotateAnimate 10s linear infinite;
    }

    /* 外层div 统一的样式 */
    .out-div {
        width: 400px;
        height: 400px;
        position: absolute;
        /* 动画过渡 */
        transition: transform 1s ease-in;
    }

    /* 外层div 单独的样式 */
    /* 前 */
    .out-front {
        transform: translateZ(200px);
    }

    /* 后 */
    .out-back {
        transform: translateZ(-200px) rotateY(180deg);
    }

    /* 左 */
    .out-left {
        transform: translateX(-200px) rotateY(-90deg);
    }

    /* 右 */
    .out-right {
        transform: translateX(200px) rotateY(90deg);
    }

    /* 上 */
    .out-top {
        transform: translateY(-200px) rotateX(90deg);
    }

    /* 下 */
    .out-bottom {
        transform: translateY(200px) rotateX(-90deg);
    }

    /* 鼠标移入，外层div各个面的样式变化 */
    .out-side:hover .out-front {
        transform: translateZ(400px);
    }

    .out-side:hover .out-back {
        transform: translateZ(-400px) rotateY(180deg);
    }

    .out-side:hover .out-left {
        transform: translateX(-400px) rotateY(-90deg);
    }

    .out-side:hover .out-right {
        transform: translateX(400px) rotateY(90deg);
    }

    .out-side:hover .out-top {
        transform: translateY(-400px) rotateX(90deg);
    }

    .out-side:hover .out-bottom {
        transform: translateY(400px) rotateX(-90deg);
    }

    /* 外层div 图片的样式 */
    .out-div img {
        width: 400px;
        height: 400px;
        /* 对图片进行剪切，保留原始比例 */
        object-fit: cover;
    }

    /* 内层div 统一的样式 */
    .in-div {
        margin-left: 100px;
        margin-top: 100px;
        width: 200px;
        height: 200px;
        position: absolute;
    }

    /* 内层div 单独的样式 */
    /* 前 */
    .in-front {
        transform: translateZ(100px);
    }

    /* 后 */
    .in-back {
        transform: translateZ(-100px) rotateY(180deg);
    }

    /* 左 */
    .in-left {
        transform: translateX(-100px) rotateY(-90deg);
    }

    /* 右 */
    .in-right {
        transform: translateX(100px) rotateY(90deg);
    }

    /* 上 */
    .in-top {
        transform: translateY(-100px) rotateX(90deg);
    }

    /* 下 */
    .in-bottom {
        transform: translateY(100px) rotateX(-90deg);
    }

    /* 内层div 图片的样式 */
    .in-div img {
        width: 200px;
        height: 200px;
        /* 对图片进行剪切，保留原始比例 */
        object-fit: cover;
    }

    /* 定义动画 */
    @keyframes rotateAnimate {
        0% {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        }

        100% {
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
    }

    作者：艾恩小灰灰 https: //www.bilibili.com/read/cv17722207 出处：bilibili
</style>

<body>
    <div class="out-side">
        <div class="box">
            <div class="out-div out-front">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
            <div class="out-div out-back">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
            <div class="out-div out-left">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
            <div class="out-div out-right">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
            <div class="out-div out-top">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
            <div class="out-div out-bottom">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>


            <div class="in-div in-front">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
            <div class="in-div in-back">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
            <div class="in-div in-left">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
            <div class="in-div in-right">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
            <div class="in-div in-top">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
            <div class="in-div in-bottom">
                <img src="https://img1.baidu.com/it/u=4071327453,3445323796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556"
                    alt="">
            </div>
        </div>
    </div>
</body>

</html>